<template>
    <div class="childBox">
        这里是子组件的内容<br>
        {{ content }}<br>
        <slot></slot><br>
        <el-button style="height:2rem;font-size: small;" type="primary" @click="message">通过$emit访问父组件</el-button>
    </div>
</template>
<script setup>
import { defineProps, defineEmits, defineExpose, ref } from 'vue'
const emits = defineEmits(['fatherMethod'])
let testText = ref('父组件$refs调用父组件方法')
defineExpose({
    text: testText,
})
defineProps({
    content: {
        type: String
    },
    fatherMethod: {
        type: Function
    },
})
let message = () => {
    emits('fatherMethod')
}

</script>
<style scoped lang='scss'>
.childBox {
    width: 100%;
    height: 6rem;
    color: red;
    background-color: #eee;
}
</style>